<template>
    <div class="session_content">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>会话内容</span>
            </div>
            <el-row :gutter="20">
                <el-col :span="5">
                    <el-select v-model="account" placeholder="选择员工" @change="selectAccount" style="width: 100%">
                        <el-option
                                v-for="item in users" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                    <div>
                        <el-tabs type="border-card">
                            <el-tab-pane :label="item.name" v-for="(item,index) in chatType" :key="item.type">
                                <div class="chatList" v-for="(itemc,indexc) in accChatRecord" :key="indexc">
                                    <el-button class="text" @click="checkRecord(itemc,item.type)" v-if="itemc.type === item.type">
                                        <el-row>
                                            <el-col :span="4"><img class="chatRecordImg" :src="itemc.headUrl">
                                            </el-col>
                                            <el-col :span="12">
                                                <span class="nickname_style">{{itemc.nickName}}</span>
                                                <span class="text-shenglue">{{itemc.lastMessage}}</span>
                                            </el-col>
                                            <el-col :span="8" style="margin-top: 15px">
                                                <span style="font-size: 14px;color: #9d9d9d;text-align: right">{{formatDate(itemc.timestamp,2)}}</span>
                                            </el-col>
                                        </el-row>
                                    </el-button>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </el-col>
                <el-col :span="0.9">
                    <el-divider direction="vertical" id="vertical"></el-divider>
                </el-col>
                <el-col :span="18">
                    <div>
                        <el-col :span="4">
                            <span id="nickName" style="margin-top: 8px;">{{ selectUser.nickName }}&nbsp;</span>
                        </el-col>
                        <el-col :span="19" style="height: 30px">
                            <el-input v-model="keyword" placeholder="请输入内容"></el-input>
                        </el-col>
                        <el-col :span="1" style="height: 30px">
                            <el-button type="primary" @click="conditions">查询</el-button>
                        </el-col>
                    </div>
                    <div>
                        <el-col :span="24">
                            <el-divider></el-divider>
                        </el-col>
                        <el-col id="content-cent" :span="24" style="overflow: scroll;height: 620px" @scroll="funcScroll">
                            <div class="chat-content" style="overflow-y: hidden !important;" @mouseenter="chat(true)" @mouseleave="chat(false)">
                                <div style="display: inline-block;text-align:center;width: 1193px">
                                    <span v-if="isHead" style="color: #afabab;font-size: 14px">已经到顶了！</span>
                                </div>
                                <!-- recordContent 聊天记录数组-->
                                <div style="overflow: auto;width: 1160px;">
                                    <div v-for="(itemc,indexc) in selectClient" :key="indexc">
                                        <!-- 对方 -->
                                        <div class="word" v-if="itemc.mineMsg === 2">
                                            <img :src="itemc.headUrl">
                                            <div class="info">
                                                <p class="time">{{itemc.nickName}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{formatDate(itemc.timestamp,1)}}</p>
                                                <div style="width: 400px;">
                                                    <div class="info-content"
                                                         style="width: fit-content;word-break: break-word;">
                                                        {{itemc.contactText}}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- 我的 -->
                                        <div class="word-my" v-else>
                                            <div class="info">
                                                <p class="time">{{formatDate(itemc.timestamp,1)}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{itemc.nickName}}</p>
                                                <div style="width: 400px;float:right">
                                                    <div class="info-content"
                                                         style="word-break: break-word;width: fit-content">
                                                        {{itemc.contactText}}
                                                    </div>
                                                </div>
                                            </div>
                                            <img :src="itemc.headUrl">
                                        </div>
                                    </div>
                                </div>
                                <div style="display: inline-block;text-align:center;width: 1193px">
                                    <span v-if="isTail" style="color: #afabab;font-size: 14px">已经到底了！</span>
                                </div>
                            </div>
                        </el-col>
                    </div>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script>
    import SetUp from "@/views/riskControl/illegal_remind/set_up"

    export default {
        components: {
            SetUp,
        },
        props: {
            jump: {
                type: Object,
                default() {
                    return {
                        empId: '',
                        clientId: '',
                    }
                }
            }
        },
        data() {
            return {
                isChat: false,
                isHead: false,
                isTail: false,
                users: [],
                chatType:[
                    {
                        name: '外部群聊',
                        type: '1',
                    },
                    {
                        name: '内部群聊',
                        type: '2',
                    },
                    {
                        name: '外部单聊',
                        type: '3',
                    },
                    {
                        name: '内部单聊',
                        type: '4',
                    },
                ],
                keyword: '',
                account: '',//要查询的账号
                accChatRecord: [],//查出的聊天列表
                selectClient: [],//与某个客户的聊天详情
                selectUser: {},//选中的列表对象
                selectType: '',//选中的类型
                translateY: 0,
                hisTop: 0,
                duration: 0,
                index: 1,
                topHeight: 0,
            }
        },
        /*directives: {
            scroll: {
                bind (el, binding, vnode) {
                    const pause = (e) => {
                        let auto = binding.value ? binding.value.auto : false
                        let scrolled = el.scrollTop + el.clientHeight + 1 < el.scrollHeight
                        let timeout
                        window.clearTimeout(timeout)
                        timeout = setTimeout(() => {
                            if (auto && scrolled) {
                                el.setAttribute('v-scroll2-manually', 'yes')
                            } else if (auto && !scrolled) {
                                el.setAttribute('v-scroll2-manually', '')
                            } else {
                                el.removeEventListener('scroll', pause)
                            }
                        }, 600)
                    }
                    el.addEventListener('scroll', pause)
                },
                update (el, binding, vnode) {
                    if (!el.getAttribute('v-scroll2-manually')) {
                        vnode.context.$nextTick(() => {
                            el.scrollTop = el.scrollHeight - el.clientHeight
                        })
                    }
                }
            }
        },*/
        mounted() {
            this.getEmpList();
            window.addEventListener('scroll', this.funcScroll, true);
            if (this.jump != null && this.jump != undefined){
                this.jumpQuery();
            }
        },
        // 离开这个页面销毁滚动条事件，不然会给每一个页面都触发
        beforeDestroy() {
            window.removeEventListener('scroll', this.funcScroll)
        },
        methods: {
            chat(is){
                this.isChat = is;
            },
            jumpQuery(){
                //跳转过来的操作
                this.account = this.jump.empId;
                this.selectAccount();
            },
            //查询员工详情
            getEmpList(){
                let that = this
                this.$request('/api/emp/getAllEmp/1_0', {} , 'POST').then((data) => {
                    for (let index in data.rows){
                        that.users.push({
                            value: data.rows[index].empId,
                            label: data.rows[index].empName,
                        })
                    }
                })
            },
            checkRecord(item,type) {
                let that = this
                that.isHead = false
                that.isTail = false
                that.selectUser = item
                that.selectType = type
                let key = ''
                if (that.keyword != ''){
                    key = '&keyword=' + that.keyword;
                }
                let params = 'empId='+this.account + key + '&targetId=' + item.userId + '&type=' + type;
                this.$request('/api/sessionContent/getRecordsByKeyword/1_0?' + params,'', 'POST').then((data) => {
                    this.selectClient = data.rows
                }).then(() => {
                    let content = document.getElementById("content-cent")
                    this.topHeight = content.scrollHeight
                    content.scrollTop = this.topHeight
                })
            },
            conditions(){
                let that = this
                let key = ''
                if (that.keyword != ''){
                    key = '&keyword=' + that.keyword;
                }
                let params = 'empId='+this.account + key + '&targetId=' + that.selectUser.userId + '&type=' + that.selectType;
                this.$request('/api/sessionContent/getRecordsByKeyword/1_0?' + params,'', 'POST').then((data) => {
                    this.selectClient = data.rows
                })
            },
            selectAccount() {
                let that = this
                this.selectClient = {}
                that.isHead = false
                that.isTail = false
                this.$request('/api/sessionContent/getRecordsByStaffId/1_0?empId=' + this.account,'', 'POST').then((data) => {
                    that.accChatRecord = data.rows
                    if (that.jump != null && that.jump != undefined){
                        for (let item of that.accChatRecord){
                            if (item.userId == that.jump.clientId){
                                that.checkRecord(item,'3')
                            }
                        }
                    }
                })
            },
            //时间戳转换时间格式, type=1 带时间; type=2 不带时间
            formatDate(value, type) {
                var timer = ''
                if (value == null) {
                    return '';
                } else {
                    let date = new Date(value);
                    let y = date.getFullYear();// 年
                    let MM = date.getMonth() + 1;// 月
                    MM = MM < 10 ? ('0' + MM) : MM;
                    let d = date.getDate();// 日
                    d = d < 10 ? ('0' + d) : d;
                    let h = date.getHours();// 时
                    h = h < 10 ? ('0' + h) : h;
                    let m = date.getMinutes();// 分
                    m = m < 10 ? ('0' + m) : m;
                    let s = date.getSeconds();// 秒
                    s = s < 10 ? ('0' + s) : s;
                    if (type === 1) {
                        timer = y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
                    } else if (type === 2) {
                        timer = y + '-' + MM + '-' + d;
                    }
                }
                return timer
            },
            funcScroll(e) {
                let that = this
                if (that.isChat === false){
                    return;
                }
                if (e.target.scrollTop === 0 && !this.isHead){
                    let params = 'empId='+this.account + '&targetId=' + that.selectUser.userId + '&type=' + that.selectType + '&slidetype=' + 1 + '&chatMessageId=' + that.selectClient[0].chatMessageId;
                    this.$request('/api/sessionContent/getSlideQuery/1_0?' + params,'', 'POST').then((data) => {
                        if (data.rows != null && data.rows.length != 0){
                            that.selectClient = [...data.rows, ...that.selectClient]
                        }
                        if (data.rows === null || data.rows.length === 0 || data.rows.length < 20){
                            that.isHead = true
                        }
                    }).then(() => {
                        let content = document.getElementById("content-cent")
                        content.scrollTop = content.scrollHeight - this.topHeight
                        this.topHeight = content.scrollHeight
                    })
                }
                if (e.target.clientHeight + e.target.scrollTop === e.target.scrollHeight && !this.isTail){
                    let params = 'empId='+this.account + '&targetId=' + that.selectUser.userId + '&type=' + that.selectType + '&slidetype=' + 2 + '&chatMessageId=' + that.selectClient[that.selectClient.length - 1].chatMessageId;
                    this.$request('/api/sessionContent/getSlideQuery/1_0?' + params,'', 'POST').then((data) => {
                        if (data.rows != null && data.rows.length !== 0){
                            that.selectClient = [ ...that.selectClient, ...data.rows]
                        }
                        if (data.rows === null || data.rows.length === 0 || data.rows.length < 20){
                            that.isTail = true
                        }
                    }).then(() => {
                        let content = document.getElementById("content-cent")
                        this.topHeight = content.scrollHeight
                    })
                }
            }
        }
    }
</script>

<style>
    .session_content .chat-content {
        width: 100%;
        padding: 20px;
    }

    .session_content .chat-content .word {
        display: flex;
        margin-bottom: 20px;
    }


    .session_content .chat-content .word img {
        margin-top: 20px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    .session_content .chat-content .word .info {
        margin-left: 10px;
    }

    .session_content .chat-content .word .info .time {
        font-size: 12px;
        color: rgba(51, 51, 51, 0.8);
        margin: 0;
        height: 20px;
        line-height: 20px;
    }

    .session_content .chat-content .word .info .info-content {
        padding: 10px;
        font-size: 14px;
        background: rgba(174, 176, 179, 0.99);
        position: relative;
        margin-top: 8px;
    }

    .session_content .chat-content .word .info .info-content::before {
        position: absolute;
        left: -8px;
        top: 8px;
        content: '';
        border-right: 10px solid #aeb0b3;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
    }

    .session_content .word-my {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 20px;
    }

    .session_content .word-my img {
        margin-top: 20px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    .session_content .word-my .info {
        width: 90%;
        margin-left: 10px;
        text-align: right;
    }

    .session_content .word-my .info .time {
        font-size: 12px;
        color: rgba(51, 51, 51, 0.8);
        margin: 0;
        height: 20px;
        line-height: 20px;
        margin-top: -5px;
        margin-right: 10px;
    }

    .session_content .word-my .info .info-content {
        max-width: 100%;
        padding: 10px;
        font-size: 14px;
        float: right;
        margin-right: 10px;
        position: relative;
        margin-top: 8px;
        background: #A3C3F6;
        text-align: left;
    }

    .session_content .word-my .info .info-content::after {
        position: absolute;
        right: -8px;
        top: 8px;
        content: '';
        border-left: 10px solid #A3C3F6;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
    }

    .session_content #vertical {
        display: inline-block;
        width: 1px;
        height: 75vh;
        margin-right: 0;
        vertical-align: middle;
        position: relative;
    }

    .session_content #divider1 {
        display: block;
        height: 1px;
        width: 100%;
        margin: 24px auto 0 auto;
    }

    .session_content .chatRecordImg {
        width: 40px;
        height: 40px;
    }

    .session_content .text-shenglue {
        display: block;
        word-break: keep-all;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        -icab-text-overflow: ellipsis;
        -khtml-text-overflow: ellipsis;
        -moz-text-overflow: ellipsis;
        -webkit-text-overflow: ellipsis;
        font-size: 12px;
        color: #9d9d9d;
        max-width:120px;
        padding-top: 8px;
    }

    .session_content .chatList .text {
        border: 0 solid #DCDFE6;
        padding: 0;
        width: 100%;
        text-align: left;
    }

    .session_content .el-tabs__item {
        border: 0;
        padding-left: 8px;
        padding-right: 8px;
    }

    .session_content .el-tabs--border-card {
        width: 100%;
        border: 0;
    }

    .session_content .el-tabs__nav-wrap {
        margin-left: 1px;
    }

    .session_content .el-tabs__content {
        height: 65vh;
    }

    .session_content #nickName {
        display: inline-block;
        vertical-align: middle
    }
    .session_content .nickname_style{
        font-size: 16px;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>
